<!DOCTYPE html>
<html>
  <head>
    <!-- Add Mark Of The Web -->
    <!-- saved from url=(0014)about:internet -->

	<!-- Make .Net WebBrowser component work -->
	<meta http-equiv="X-UA-Compatible" content="IE=9" />
	
    <!--these three are required by the ChemDoodle Web Components library-->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <link rel="stylesheet" href="ChemDoodleWeb/ChemDoodleWeb.css" type="text/css">
    <script type="text/javascript" src="ChemDoodleWeb/ChemDoodleWeb.js"></script>

    <!--these two are required by the SketcherCanvas plugin-->
    <link rel="stylesheet" href="ChemDoodleWeb/uis/jquery-ui-1.10.3.custom.css" type="text/css">
    <script type="text/javascript" src="ChemDoodleWeb/uis/ChemDoodleWeb-uis.js"></script>
    
	<!-- Our files -->
	<link rel="stylesheet" href="Chem4Word.css" type="text/css" />
    <script type="text/javascript" src="Chem4Word.js"></script>

	<title>ChemDoodle</title>
  </head>

  <body onresize="resize_canvas()" onload="resize_canvas()" style="background-color:White">

	<canvas id="sketcher"/>

	<script type="text/javascript">
	    var X_OFFSET = 20;
	    var Y_OFFSET = 100;

	    function resize_canvas() {
	        sketcher.resize(window.innerWidth - X_OFFSET, window.innerHeight - Y_OFFSET);
	    }

	    // Initialise ChemDoodle and Sketcher

	    // changes the default JMol color of hydrogen to black so it appears on white backgrounds
	    ChemDoodle.ELEMENT['H'].jmolColor = 'black';
	    // darkens the default JMol color of sulphur so it appears on white backgrounds
	    ChemDoodle.ELEMENT['S'].jmolColor = '#B9A130';

	    // initializes the SketcherCanvas
	    var sketcher = new ChemDoodle.SketcherCanvas('sketcher', window.innerWidth - X_OFFSET, window.innerHeight - Y_OFFSET, { useServices: false, oneMolecule: true, includeToolbar: true });
	    // sets terminal carbon labels to display
	    sketcher.specs.atoms_displayTerminalCarbonLabels_2D = true;
	    // sets atom labels to be colored by JMol colors, which are easy to recognize
	    sketcher.specs.atoms_useJMOLColors = true;
	    // enables overlap clear widths, so that some depth is introduced to overlapping bonds
	    sketcher.specs.bonds_clearOverlaps_2D = true;
	    // sets the shape color to improve contrast when drawing figures
	    sketcher.specs.shapes_color = 'c10000';

	    // because we do not load any content, we need to repaint the sketcher, otherwise we would just see an empty area with the toolbar
	    // however, you can instead use one of the Canvas.load... functions to pre-populate the canvas with content, then you don't need to call repaint
	    sketcher.repaint();
	</script>

  </body>
</html>
